@import 'mixin.scss';

/**
 * 煤棚样式文件
 * author aty
 */

.page-coal-shed-2 {
	@include video-box;
	@include card-title;
	.left-section {
		width: 18%;
		height: 100%;
		overflow: hidden;
		.card {
			width: 100%;
			background: url('../img/bg-mini-card.png') left top no-repeat;
			background-size: 100% 100%;
		}
		.ec {
			height: calc(25% - 10px);
			margin-bottom: 10px;
		}
		.line-one {
			height: calc(45% - 10px);
			margin-bottom: 10px;
			.line-p {
				font-size: 14px;
				font-weight: 400;
				color: #ffffff;
				padding-top: 15px;
				margin-left: 10px;
			}
			#vocs {
				height: 90%;
				width: 100%;
			}
		}
		.mist {
			height: 30%;

			.device-state {
				display: flex;
				justify-content: space-between;
				padding: 0 10px;

				.state {
					min-width: 66px;
					padding-left: 20px;
					position: relative;
					transform: translateY(10px);
					cursor: pointer;
					&:after {
						content: '';
						position: absolute;
						width: 10px;
						height: 10px;
						background: gray;
						border-radius: 50%;
						margin-right: 5px;
						left: 6px;
						top: 5px;
					}
				}
				.state.inline {
					&::after {
						background: #4ee000;
					}
				}
			}
		}

		.content-body {
			& > canvas.item {
				height: 100%;
				width: 50%;
			}
		}
	}
	.content-section {
		display: flex;
	}

	.center-section {
		width: 60%;
		height: 100%;
		background: url(../img/center-section.png) center no-repeat;
		background-size: 100% 100%;
		margin-left: 10px;
		padding: 10px;
		.video {
			width: 100%;
			height: 70%;
			padding: 20px 20px 10px 20px;
		}
		.push-button {
			width: 95%;
			    height: 26%;
			    margin: 0 auto;
			
			margin-top: 8px;
			// 视频按钮
			.push-vutton-ul{
				display: flex;
				justify-content: space-between;
				li{
					flex-grow: 1;
					width: 25%;
					box-sizing: border-box;
				}
			.push-button-li {
				    margin-left: 64px;
				margin-top: 30px;
				
				.switch{
					width: 72px;
					height: 72px;
					background:rgb(24,61,162);
					border-radius:50% ;
					cursor: pointer;
				.switch-img-2{
					width: 100%;
					height: 100%;
					background: url(../img/play-close-default.png) no-repeat 12px;
					background-size: 68% 68%;
					&:hover{
						background: url(../img/play-close.png) no-repeat 12px;
					}
				}
					.switch-img{
						width: 100%;
						height: 100%;
						background: url(../img/play-circle-default.png) no-repeat 12px;
						background-size: 68% 68%;
						&:hover{
							background: url(../img/play-circle.png) no-repeat 12px;
						}
					}	
					
				}
				.switch-2 {
					font-size: 16px;
					font-weight: 400;
					color: #ffffff;
					padding-top: 25px;
					margin-left: 20px;
				}

				.remotecontrol-p {
					font-size: 16px;
					font-weight: 400;
					color: #ffffff;
					margin-left: 30px;
				}
			}
			.play {
				height: 146px;
				background: url(../img/player-bg.png) no-repeat;
				cursor: pointer;
				position: relative;
				margin-left: 40px;
				
				.play-btn-left {
				width: 25px;
				height: 30px;
				background: url(../img/play-btn-left-default.png) no-repeat;
				position: absolute;
				left: 5px;
				top: 46px;
				&:hover{
					background: url(../img/play-btn-left.png);
				}
				}
				.play-btn-right {
				width: 25px;
				height: 30px;
				background: url(../img/play-btn-right-default.png) no-repeat;
				cursor: pointer;
				position: absolute;
				right: 73px;
				top: 46px;
				&:hover{
					background: url(../img/play-btn-right.png);
				}
				}
				.play-btn-up {
					width: 25px;
					height: 30px;
					background: url(../img/play-btn-up-default.png) no-repeat;
					cursor: pointer;
					position: absolute;
					right: 117px;
					top: 5px;
					&:hover{
						background: url(../img/play-btn-up.png);
					}
				}
				.play-btn-down {
					width: 35px;
					height: 30px;
					background: url(../img/play-btn-down-default.png) no-repeat;
					cursor: pointer;
					position: absolute;
					bottom: 27px;
					left: 45px;
					&:hover{
						background: url(../img/play-btn-down.png);
					}
				}
				.play-itme {
					width: 28px;
					height: 20px;
					font-size: 14px;
					font-weight: 400;
					color: #FFFFFF;
					cursor: pointer;
					position: absolute;
					left: 48px;
					top: 50px;
					&:hover{
						color: #38FFFD;
				}
			}
			.play-item2{
				  margin-top: 129px;
				  margin-left: 31px;
			}
		}
	}
	}
	}
	.right-section {
		width: calc(22% - 30px);
		margin-left: 10px;
		height: 100%;
		.card {
			width: 100%;
			height: 100%;
			margin-bottom: 10px;
			background: url('../img/left-box.png') left top no-repeat;
			background-size: 100% 100%;
			.card-p {
				padding-top: 15px;
				color: #ffffff;
				margin-left: 10px;
				font-size: 14px;
				font-weight: 500;
			}
			.move {
				width: calc(98% - 40px);
				margin-left: 20px;
				margin-top: 20px;
				height: 80%;
				background: url(../img/move.png) center no-repeat;
				background-size: 100% 100%;
			}
			.move-ul {
				.move-li {
					justify-content: space-between;
					border-bottom:1px solid rgba(82, 82, 82, 0.2);
					padding:16px 20px;
					.move-span {
						padding-left: 10px;
						font-size: 14px;
						font-weight: 400;
						color: #28b4ff;
						margin-right: 30px;
					}
				}
			}
		}
	}
}

